<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="/WEB-INF/view/common/talent-header.jspf" %>
	
	<div style="width:800px;margin:10px auto" id="container">
		<div class="row" style="margin-bottom:20px">
			<form action="" method="post" id="keyWordForm">
				<div class="col-lg-6">
				    <div class="input-group">
				      <input type="text" class="form-control" placeholder="职位名称、公司名称" name="keyWord" value="${keyWord }" id="keyWord">
				      <span class="input-group-btn">
				        <button class="btn btn-primary" type="button" onclick="goPage(${pageModel.pageNo })">搜素</button>
				      </span>
				    </div>
				</div>
			</form>
		</div>
		<span id="count">共有${pageModel.allRecords } 个招聘职位</span>
		<c:forEach items="${pageModel.list }" var="position">
		<div class="panel panel-default">
	      <div class="panel-heading">
	        <h3 class="panel-title"><strong>${position.company$name }</strong> &nbsp;&nbsp;&nbsp;&nbsp;"${position.company$slogan }"</h3>
	      </div>
	      <div class="panel-body">
	        <a href="<%=request.getContextPath()%>/PositionServlet?command=detail&id=${position.id}">${position.name }</a>
	        &nbsp;&nbsp;${position.salary1 }-${position.salary2 }
	        &nbsp;&nbsp;${position.company$address }　　
	        &nbsp;&nbsp;<fmt:formatDate value="${position.releaseTime }" pattern="yyyy-MM-dd"/>
	      </div>
	    </div>	 　　
		</c:forEach>
<!-- 
		<div class="pull-right">
			<button type="button" class="btn btn-default" onclick="goPage(${pageModel.first })" <c:if test="${pageModel.pageNo==1 }"> disabled </c:if>>首页</button>
			<button type="button" class="btn btn-default" onclick="goPage(${pageModel.pre })" <c:if test="${pageModel.pageNo==1 }"> disabled </c:if>>上一页</button>
			<select id="page" class="btn btn-default" onchange="goPage(this.value)"></select>
			<button type="button" class="btn btn-default" onclick="goPage(${pageModel.next })" <c:if test="${pageModel.pageNo==pageModel.totalPage }"> disabled </c:if>>下一页</button>
			<button type="button" class="btn btn-default" onclick="goPage(${pageModel.last })" <c:if test="${pageModel.pageNo==pageModel.totalPage }"> disabled </c:if>>尾页</button>
			&nbsp;&nbsp;&nbsp;&nbsp;总共${pageModel.allRecords }条记录
		</div>
-->
	</div>
	<div id="loadGif" style="width:66px;height:66px;margin:0 auto;">
		<img  alt="加载中..." src="<%=request.getContextPath()%>/static/common/images/loading.gif"/>
	</div>
	<%@ include file="/WEB-INF/view/common/footer.jspf" %>
	<script>
	/**
	*	选择页数
	window.onload=function(){
		var pageNo='${pageModel.pageNo}';
		var totalPage='${pageModel.totalPage}';
		var s = document.getElementById("page");
		for (var i = 1; i <= totalPage; i++) {
			if(pageNo==i){
				 var varItem = new Option('第'+i+'页', i);      
			        s.options.add(varItem); 
			        varItem.selected=true;
			}else{
				var varItem = new Option('第'+i+'页', i);      
		        s.options.add(varItem); 
			}
		}
	}
	*/
	

	
	function goPage(pageNo){
		submitForm('<%=request.getContextPath()%>/PositionServlet?command=queryByKeyWord&pageNo='+pageNo);
	}
	/**
	*表单提交
	*/
	function submitForm(url){
		var keyWordForm = document.getElementById("keyWordForm");
		keyWordForm.action=url;
		keyWordForm.submit();
	}
	/**
	*	懒加载
	*/
	// 滚动条总共高度(scrollHeight) = 滚动过的高度(scrollTop) + 屏幕的可见高度(windowHeight)
	var pageNo=parseInt('${pageModel.next}');
	var totalPage=parseInt('${pageModel.totalPage}');
	var scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
	var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	var flag = true;
	window.onscroll = function() {
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		if(scrollHeight - (scrollTop + windowHeight) <= 20 && flag) {
			var keyWord = document.getElementById("keyWord").value;
			console.info(keyWord);
			flag=false;
			if(pageNo > totalPage){
				var html = [];	
				html.push('<div class="panel panel-default"> 没有了......</div>');
				$('#container').append(html.join(''));
			}else{
				$("#loadGif").show();
					$.get('<%=request.getContextPath()%>/PositionServlet?command=loadingData&pageNo='+ pageNo +'&keyWord='+ keyWord +'&time=new Date().getTime()',function(datas) {
						var html = [];	
						for (var i = 0; i < datas.list.length; i++) {
							html.push('<div class="panel panel-default">');
							html.push('  <div class="panel-heading">');
							html.push('    <h3 class="panel-title"><strong>' + datas.list[i].company$name  + '</strong> &nbsp;&nbsp;&nbsp;&nbsp;"'+ datas.list[i].company$slogan +'"</h3>');
							html.push('  </div>');
							html.push('  <div class="panel-body">');
							html.push('   	<a href="<%=request.getContextPath()%>/PositionServlet?command=detail&id=" ' + datas.list[i].id + '>' + datas.list[i].name + '</a>');
							html.push('  &nbsp;&nbsp;'+datas.list[i].salary1 +'-'+ datas.list[i].salary2);
							html.push('  &nbsp;&nbsp;'+datas.list[i].company$address);
							html.push('   &nbsp;&nbsp;' + datas.list[i].releaseTime);
							html.push('  </div>');
							html.push('</div>');
						}
						$('#container').append(html.join(''));
						$('#count').html("为您找到相关结果约"+datas.allRecords+"个招聘职位")
						pageNo++;
						totalPage = datas.totalPage;
						scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
						flag=true;
					}, 'json'); 
				$("#loadGif").hide();
			}	
		} 
	}
	
</script>
</body>
</html>